<template>
	<view class="play_page">
		<image class="play_page_image" :src="nowPlaySong.picUrl" mode=""></image>
		<view class="status_bar"></view>
		<view class="play_top_box display_flex_seart">
			<view class="play_top_back display_flex_center" @click="closePlayPage">
				<u-icon color="#fff" size="26" name="arrow-leftward"></u-icon>
			</view>
			<view class="play_top_desc">
				<view class="play_top_title display_flex_seart text_overflow_ellipsis">
					{{nowPlaySong.name}}
				</view>
				<view class="play_top_author display_flex_seart text_overflow_ellipsis">
					{{nowPlaySong.author}}
				</view>
			</view>

			<view class="play_btn_list" @click="showSongListClick"><u-icon name="list-dot" size="35"
					color="#fff"></u-icon></view>
		</view>


		<view class="play_poser_box" @click="show_lyric = !show_lyric" v-if="!show_lyric">
			<image :class="'play_poser_zz '+(isPlay?'active':'')" src="/static/needle-ab.png" mode=""></image>

			<image class="play_poser_zp" src="/static/cd.png" mode="widthFix"></image>

			<image :class="'play_poser_hbs '+(isPlay?'active':'')" :src="nowPlaySong.picUrl" mode="widthFix"></image>

		</view>


		<view class="song_ci_box" @click="show_lyric = !show_lyric" v-else>
			<scroll-view :scroll-into-view="'lyrics'+nowlyricTime" scroll-y class="song_ci_scroll"
				v-if="lyricList.length>0">
				<view v-for="(item,index) in lyricList" :class="'play_gc_item '+(item.time==nowlyricTime?'active':'')"
					:id="'lyrics'+item.time">{{item.lyrics}}</view>
			</scroll-view>
			<u-empty textColor="#fff" iconColor="#fff" mode="history" text="没有歌词" v-if="lyricList.length == 0">
			</u-empty>
		</view>


		<view class="play_control_box">
			<view class="play_progress display_flex_center">
				<text>{{nowPlayInfo.durationStr}}</text>
				<view style="width: 100%;">
					<u-slider @change="songSliderChange" :value="nowPlayInfo.nowDuration" :max="nowPlayInfo.duration"
						block-width="10"></u-slider>
				</view>
				<text>{{nowPlayInfo.nowDurationStr}}</text>
			</view>
			<view class="play_btns display_flex_around">
				<view @click="previousSong" class="play_btn_left"><u-icon name="rewind-left" size="35"
						color="#fff"></u-icon></view>
				<view class="play_btn_ing" @click="playSong">
					<u-icon v-if="isPlay" name="pause-circle" size="80" color="#fff"></u-icon>
					<u-icon v-else name="play-circle" size="80" color="#fff"></u-icon>
				</view>
				<view @click="nextSong" class="play_btn_right"><u-icon name="rewind-right" size="35"
						color="#fff"></u-icon></view>

				<!-- #ifdef MP -->
				<view class="play_btn_list" @click="showSongListClick"><u-icon name="list-dot" size="35"
						color="#fff"></u-icon></view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "x-play-page",
		data() {
			return {
				nowlyricTime: 0,
				show_lyric: false,
				progress: 0,
				lyricList: []
			};
		},
		computed: {
			...mapState(['nowPlaySong', "isPlay", "nowPlayInfo"])
		},
		mounted() {
			uni.$on('toggleSong', (data) => {
				this.getSongLyric();
			});
			this.getSongLyric();
			let innerAudioContextEle = app.globalData.innerAudioContext;
			innerAudioContextEle.onTimeUpdate(() => {
				let duration = parseInt(innerAudioContextEle.duration);
				let currentTime = parseInt(innerAudioContextEle.currentTime);
				let songInfo = {
					nowDuration: currentTime,
					duration: duration,
					durationStr: uni.$sToHs(duration),
					nowDurationStr: uni.$sToHs(currentTime)
				};
				this.setNowPlayInfo(songInfo);
				let closestLyric = uni.$findClosestLyricBefore(this.lyricList, currentTime);
				if (closestLyric && closestLyric.time) {
					this.nowlyricTime = closestLyric.time || 0;
				} else {
					this.nowlyricTime = 0;
				}
			});
		},
		methods: {
			...mapMutations(['setShowPlayPage', 'setShowPlayList', "setNowPlayInfo"]),

			getSongLyric() {
				let _this = this;
				let id = _this.nowPlaySong.id;
				uni.$ajax({
					url: '/lyric?id=' + id,
					type: "get",
				}).then(res => {
					let lyricsText = res.lrc.lyric || "";
					if (lyricsText) {
						const regex = /\[(\d+:\d+\.\d+)](.+)/g;
						const lyricsArray = [];
						let match;

						while ((match = regex.exec(lyricsText)) !== null) {
							const time = match[1];
							const lyrics = match[2].trim();
							const seconds = uni.$timeToSeconds(time);
							lyricsArray.push({
								time: seconds,
								lyrics
							});
						}
						if (lyricsArray) {
							_this.lyricList = lyricsArray;
						}
					}
				})
			},

			closePlayPage() {
				this.setShowPlayPage(false);
			},
			showSongListClick() {
				this.setShowPlayList(true);
			},
			playSong() {
				this.$emit("playSong");
			},
			previousSong() {
				this.$emit("previousSong");
			},
			nextSong() {
				this.$emit("nextSong");
			},
			songSliderChange(e) {
				let innerAudioContextEle = app.globalData.innerAudioContext;
				this.$nextTick(() => {
					let songInfo = this.nowPlayInfo;
					innerAudioContextEle.startTime = e;
					innerAudioContextEle.seek(e);
					songInfo.nowDuration = e;
					songInfo.nowDurationStr = uni.$sToHs(e);
					this.setNowPlayInfo(songInfo);
				})
			},
		}
	}
</script>

<style>
	.play_page {
		width: 100%;
		max-width: 650px;
		height: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 9999998;
		background-color: #A7ACA9;
		transition: all 1s;
	}

	.play_page_image {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		filter: blur(20px);
	}

	.play_top_box {
		width: 100%;
		height: 100rpx;
		background-color: #3e3d3221;
		border-radius: 20rpx;
	}

	.play_btn_list {
		box-sizing: border-box;
		padding-right: 20rpx;
	}

	.play_top_back {
		width: 150rpx;
	}

	.play_top_desc {
		width: 100%;
	}

	.play_top_title {
		font-size: 32rpx;
		color: #fff;
	}

	.play_top_author {
		color: #fff;
		font-size: 28rpx;
	}


	.song_ci_box {
		width: 100%;
		height: 66%;
	}

	.song_ci_scroll {
		width: 100%;
		height: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.play_gc_item {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ededed;
		box-sizing: border-box;
		padding: 24rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.play_gc_item.active {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.play_poser_box {
		width: 100%;
		height: 66%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.play_poser_zz {
		width: 200rpx;
		height: 300rpx;
		position: absolute;
		left: 46%;
		transform-origin: 0 0;
		transform: rotate(-15deg);
		transition: all 2s;
		z-index: 3;
	}

	.play_poser_zz.active {
		transform: rotate(0deg);
	}

	.play_poser_zp {
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		top: 160rpx;
		z-index: 1;
	}

	.play_poser_hbs {
		width: 320rpx;
		height: 320rpx;
		border-radius: 50%;
		position: absolute;
		top: 250rpx;
		z-index: 2;
	}

	.play_poser_hbs.active {
		animation: rotate 10s linear infinite;
	}

	.play_control_box {
		width: 100%;
		max-width: 650px;
		height: 30%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		z-index: 667;
		margin: auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.play_progress {
		width: 100%;
		height: 150rpx;
		box-sizing: border-box;
	}

	.play_progress text {
		display: block;
		padding: 0 10rpx;
		box-sizing: border-box;
		color: #fff;
	}

	.play_btns {}

	.play_btn_left {}

	.play_btn_ing {}

	.play_btn_right {}
</style>